<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>管理登录</title>
    <link rel="stylesheet" href="${base}/assets/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${base}/assets/plugins/animate.css/animate.min.css">
    <link rel="stylesheet" href="${base}/assets/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${base}/assets/plugins/toastr/toastr.min.css">
    <link rel="stylesheet" href="${base}/assets/plugins/alertify/css/alertify.min.css">
    <link rel="stylesheet" href="${base}/assets/plugins/alertify/css/themes/bootstrap.min.css">
    <link rel="stylesheet" href="${base}/assets/css/login.css">

    <script src="${base}/assets/plugins/jquery/dist/jquery.js"></script>
    <script src="${base}/assets/plugins/toastr/toastr.min.js"></script>

    <script src="${base}/assets/plugins/jquery-validation/jquery.validate.min.js"></script>
    <script src="${base}/assets/plugins/jquery-validation/additional-methods.min.js"></script>
    <script type="text/javascript" src="${base}/assets/js/core.js"></script>
</head>
<body>
<!--[if lte IE 9]>
<div class="login-layout login-browsehappy">
    <a href="javascript:;" class="login-close" onclick="document.body.removeChild(this.parentNode);"></a>
    <p>您正在使用 <strong class="login-text-yellow login-text-xl">过时</strong> 的非现代浏览器，<strong
            class="login-text-success login-text-xl">91.23%</strong> 的人选择
        <a href="http://browsehappy.com/" target="_blank"
           class="login-text-green-400 login-text-xl"><strong>升级浏览器</strong></a>，获得了更好、更安全的浏览体验！
    </p>
</div>
<![endif]-->
<div class="login-layout login-flexbox login-flex-column login-layout">
    <div class="login-layout login-flex login-main">
        <div class="login-layout login-layout-fixed login-layout-fixed-1200 login-main-con">
            <div class="login-panel">

                <form class="login-form"  action="${base}/auth/login" method="post">
                    <input type="hidden" name="graphId" id="graphId" />
                    <h1 class="login-text-white login-text-normal">
                        登录 Login
                    </h1>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-user login-text-blue"></i></div>
                            <input type="text" name="username" class="form-control" placeholder="用户名"
                                   value="${lastUserName?default('')}">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-lock login-text-blue"></i></div>
                            <input type="password" name="password" class="form-control" placeholder="密码">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon"><i class="fa fa-shield login-text-blue"></i></div>
                            <input type="text" name="captcha" class="form-control" placeholder="验证码">
                            <span class="input-group-btn" style="cursor: pointer;padding-left: 10px">
                                <img alt="验证码" id="captchaImg"class="captcha-img pull-right" style="height: 34px;width: 110px" title="看不清？点击刷新"/>                 </span>
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="checkbox login-text-white login-text-xs">
                            <label> <input type="checkbox"> 记住我</label>
                        </div>
                    </div>
                    <#if error??>
                        <div align='center' class='alert alert-danger'>${error}</div>
                    </#if>
                    <div class="form-actions">
                        <button type="submit" class="btn  btn-lg login-bg-blue btn-block">登录</button>
                    </div>

                </form>

            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    jQuery(document).ready(function () {

        function refreshCaptha() {
            $.ajax({
                url: "/captcha/graph",
                method: 'get',
                success: function (result) {
                    $("#graphId").val(result.data.graphId);
                    $("#captchaImg").attr("src", result.data.img);
                }
            })
        }

        $('.login-form').validate({
            errorElement: 'span', //default input error message container
            errorClass: 'help-block', // default input error message class
            focusInvalid: false, // do not focus the last invalid input
            rules: {
                username: {
                    required: true
                },
                password: {
                    required: true
                },
                captcha: {
                    required: true
                }
            },

            messages: {
                username: {
                    required: "请填写登录账号"
                },
                password: {
                    required: "请填写登录密码"
                },
                captcha: {
                    required: "请填写登录验证码"
                }
            },
            errorPlacement: function (error, element) {
                error.appendTo(element.closest('.form-group'))
            },
            highlight: function (element) {
                $(element).closest('.form-group').removeClass('success').addClass('has-error');
            },
            success: function (element) {
                $(element).closest('.form-group').removeClass('has-error').addClass('success');
            },
            submitHandler: function (form) {
                form.submit();

            }
        });
        refreshCaptha();

        $("#captchaImg").on("click", function () {
            refreshCaptha();
        })


    });
</script>
</html>

